<script setup lang="ts">
// 不需要导入导航栏组件

// 导入用户存储
import { useUserStore } from './stores/user';
// 导入图标组件
import { 
  Plus, 
  Search, 
  Edit, 
  Picture, 
  Document, 
  Connection, 
  Microphone, 
  Link, 
  Star, 
  Cloudy, 
  Collection, 
  ChatDotRound,
  Setting,
  SwitchButton,
  User,
  ArrowDown,
  ChatLineRound
} from '@element-plus/icons-vue';
// 导入路由
import { useRouter, useRoute } from 'vue-router';
import { computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';

// 初始化用户存储
const userStore = useUserStore();
// 初始化路由
const router = useRouter();
const route = useRoute();

// 当前路由路径
const currentPath = computed(() => route.path);

// 导航到指定页面
const navigateTo = (path: string) => {
  router.push(path);
};

// 检查菜单项是否活跃
const isActive = (path: string) => {
  return currentPath.value.startsWith(path);
};

// 处理用户菜单命令
const handleUserCommand = (command: string) => {
  switch (command) {
    case 'profile':
      // 导航到个人中心页面
      // router.push('/user/profile');
      ElMessage.info('个人中心功能即将上线');
      break;
    case 'settings':
      // 导航到设置页面
      // router.push('/user/settings');
      ElMessage.info('设置功能即将上线');
      break;
    case 'posts':
      // 导航到我的讨论页面
      router.push('/discuss/my');
      break;
    case 'logout':
      // 处理退出登录
      handleLogout();
      break;
  }
};

// 处理退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    
    // 清除用户状态
    userStore.clearUser();
    ElMessage.success('退出登录成功');
    router.push('/login');
  } catch (error) {
    // 用户取消退出登录，不做任何处理
  }
};
</script>

<template>
  <div class="app-container">
    <!-- 左侧边栏 -->
    <div class="sidebar">
      <!-- 用户信息 -->
      <div class="user-info">
        <el-dropdown @command="handleUserCommand" trigger="click">
          <div class="avatar-container">
            <el-avatar :size="36" class="user-avatar">
              {{ userStore?.username?.charAt(0).toUpperCase() || '用' }}
            </el-avatar>
            <div class="user-details">
              <span class="username">{{ userStore?.username || '用户' }}</span>
              <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
            </div>
          </div>
          
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <el-icon><User /></el-icon>个人中心
              </el-dropdown-item>
              <el-dropdown-item command="posts">
                <el-icon><Document /></el-icon>我的讨论
              </el-dropdown-item>
              <el-dropdown-item command="settings">
                <el-icon><Setting /></el-icon>设置
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon><SwitchButton /></el-icon>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      
      <!-- 功能菜单 -->
      <div class="menu-list">
        <div 
          class="menu-item new-chat" 
          :class="{ 'active': isActive('/chat') }" 
          @click="navigateTo('/chat')"
        >
          <el-icon><Plus /></el-icon>
          <span>新对话</span>
          <span class="shortcut">Ctrl+K</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/search') }" 
          @click="navigateTo('/search')"
        >
          <el-icon><Search /></el-icon>
          <span>AI 搜索</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/write') }" 
          @click="navigateTo('/write')"
        >
          <el-icon><Edit /></el-icon>
          <span>帮我写作</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/image') }" 
          @click="navigateTo('/image')"
        >
          <el-icon><Picture /></el-icon>
          <span>图像生成</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/read') }" 
          @click="navigateTo('/read')"
        >
          <el-icon><Document /></el-icon>
          <span>AI 阅读</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/code') }" 
          @click="navigateTo('/code')"
        >
          <el-icon><Connection /></el-icon>
          <span>AI 编程</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/voice') }" 
          @click="navigateTo('/voice')"
        >
          <el-icon><Microphone /></el-icon>
          <span>语音通话</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/web') }" 
          @click="navigateTo('/web')"
        >
          <el-icon><Link /></el-icon>
          <span>AI 看网站</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/smart') }" 
          @click="navigateTo('/smart')"
        >
          <el-icon><Star /></el-icon>
          <span>AI 智能体</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/cloud') }" 
          @click="navigateTo('/cloud')"
        >
          <el-icon><Cloudy /></el-icon>
          <span>AI 云盘</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/discuss') }" 
          @click="navigateTo('/discuss')"
        >
          <el-icon><ChatLineRound /></el-icon>
          <span>社区讨论</span>
        </div>
        
        <div 
          class="menu-item" 
          :class="{ 'active': isActive('/collect') }" 
          @click="navigateTo('/collect')"
        >
          <el-icon><Collection /></el-icon>
          <span>收藏夹</span>
        </div>
      </div>
      
      <!-- 历史对话 -->
      <div class="history-section">
        <div class="section-title">历史对话</div>
        <div class="history-list">
          <div class="history-item" v-for="(item, index) in [1,2,3]" :key="index" @click="navigateTo('/chat')">
            <el-icon><ChatDotRound /></el-icon>
            <span class="history-title">历史对话 {{ index + 1 }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 右侧主内容区域 -->
    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>

<style>
:root {
  --primary-color: #409eff;
  --primary-light: #ecf5ff;
  --text-primary: #303133;
  --text-secondary: #606266;
  --text-tertiary: #909399;
  --border-color: #e4e7ed;
  --bg-color: #f5f7fa;
  --card-bg: #ffffff;
  --sidebar-width: 240px;
  --content-width: calc(100% - var(--sidebar-width));
  --border-radius: 8px;
  --shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
  background-color: var(--bg-color);
  font-size: 14px;
  line-height: 1.5;
}

.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 左侧边栏样式 */
.sidebar {
  width: var(--sidebar-width);
  height: 100%;
  background-color: #fff;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  left: 0;
}

.user-info {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 4px;
  border-radius: 6px;
}

.avatar-container:hover {
  background-color: #f5f7fa;
}

.user-avatar {
  background-color: var(--primary-color);
  color: white;
}

.user-details {
  display: flex;
  align-items: center;
  flex: 1;
}

.username {
  font-weight: 500;
  color: var(--text-primary);
  margin-right: 5px;
}

.dropdown-icon {
  font-size: 12px;
  color: var(--text-tertiary);
}

.menu-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

.menu-item.active {
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: 500;
}

.menu-item .el-icon {
  margin-right: 10px;
  font-size: 16px;
}

.menu-item span {
  flex: 1;
}

.shortcut {
  color: var(--text-tertiary);
  font-size: 12px;
  flex: none !important;
}

.new-chat {
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: 500;
  margin-bottom: 6px;
}

.history-section {
  margin-top: 12px;
  padding: 0 8px;
  flex: 1;
  overflow-y: auto;
}

.section-title {
  padding: 6px 12px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.history-item:hover {
  background-color: #f5f7fa;
}

.history-item .el-icon {
  margin-right: 10px;
  font-size: 16px;
  color: var(--text-tertiary);
}

.history-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}

/* 右侧主内容区域样式 */
.main-content {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
  position: relative;
}

/* 卡片样式 */
.app-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  padding: 20px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease;
}

.app-card:hover {
  box-shadow: var(--shadow-medium);
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

/* 自定义下拉菜单样式 */
:deep(.el-dropdown-menu) {
  padding: 5px 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.5;
}

:deep(.el-dropdown-menu__item .el-icon) {
  margin-right: 10px;
  font-size: 16px;
}

:deep(.el-dropdown-menu__item:hover) {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

:deep(.el-dropdown-menu__item--divided:before) {
  margin: 6px 0;
}
</style>
